import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:gw_github_flutter/common/global.dart';
import 'package:gw_github_flutter/common/route_name.dart';
import 'package:gw_github_flutter/models/tbSectionModel.dart';
import 'package:sticky_and_expandable_list/sticky_and_expandable_list.dart';

class WrapRouteFlowTableView extends StatefulWidget {
  WrapRouteFlowTableView({Key? key}) : super(key: key);

  @override
  State<WrapRouteFlowTableView> createState() => _WrapRouteFlowTableViewState();
}

class _WrapRouteFlowTableViewState extends State<WrapRouteFlowTableView> {
  var list = Global.getTBSectionsList();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text(
                RouteName.sliverRoute_tableView,
                style: TextStyle(fontSize: 14),
              ),
            ),
            body: EasyRefresh.builder(
              onRefresh: () {},
              childBuilder: (context, physics) {
                return CustomScrollView(
                  physics: physics,
                  slivers: [
                    const HeaderLocator.sliver(),
                    SliverExpandableList(
                      builder: SliverExpandableChildDelegate<dynamic,
                              TbSectionModel>(
                          sectionList: list,
                          sectionBuilder: (context, containerInfo) {
                            containerInfo
                              ..header = buildHeader(context, containerInfo)
                              ..content = _buildContent(context, containerInfo);
                            return ExpandableSectionContainer(
                              info: containerInfo,
                            );
                          },
                          itemBuilder:
                              (context, sectionIndex, itemIndex, index) {
                            String item = list[sectionIndex].items?[itemIndex];
                            if (sectionIndex == 0 ||
                                sectionIndex == 1 ||
                                sectionIndex == 2) {
                              return Tile(index: index);
                            }

                            return Container(
                              child: Tile(index: index),
                              height: (index % 5 + 1) * 100,
                            );
                          }),
                    )
                  ],
                );
              },
            )));
  }

  Widget buildHeader(
      BuildContext context, ExpandableSectionContainerInfo containerInfo) {
    var sectionIndex = containerInfo.sectionIndex;
    TbSectionModel item = list[sectionIndex];
    return GestureDetector(
      child: Container(
          color: Colors.lightBlue,
          height: 100,
          padding: const EdgeInsets.only(left: 20),
          alignment: Alignment.centerLeft,
          child: Text(
            item.header ?? "",
            style: const TextStyle(color: Colors.white),
          )),
    );
  }

  Widget _buildContent(
      BuildContext context, ExpandableSectionContainerInfo containerInfo) {
    TbSectionModel section = list[containerInfo.sectionIndex];
    if (!section.isSectionExpanded()) {
      return const SizedBox.shrink();
    }
    if (containerInfo.sectionIndex == 0) {
      return GridView.custom(
        padding: EdgeInsets.only(bottom: 10),
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        gridDelegate: SliverQuiltedGridDelegate(
          crossAxisCount: 4,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          // repeatPattern: type,
          pattern: const [
            QuiltedGridTile(3, 3),
            QuiltedGridTile(1, 1),
            QuiltedGridTile(1, 1),
            QuiltedGridTile(1, 1),
          ],
        ),
        childrenDelegate: SliverChildBuilderDelegate(
            containerInfo.childDelegate!.builder as Widget Function(
                BuildContext, int),
            childCount: containerInfo.childDelegate!.childCount),
      );
    }
    if (containerInfo.sectionIndex == 1) {
      return GridView.custom(
        padding: EdgeInsets.only(bottom: 10),
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        gridDelegate: SliverQuiltedGridDelegate(
          crossAxisCount: 5,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          // repeatPattern: type,
          pattern: const [
            QuiltedGridTile(3, 3),
            QuiltedGridTile(2, 2),
            QuiltedGridTile(2, 2),
            QuiltedGridTile(1, 1),
            QuiltedGridTile(1, 1),
            QuiltedGridTile(1, 1),
          ],
        ),
        childrenDelegate: SliverChildBuilderDelegate(
            containerInfo.childDelegate!.builder as Widget Function(
                BuildContext, int),
            childCount: containerInfo.childDelegate!.childCount),
      );
    }
    if (containerInfo.sectionIndex == 2) {
      return GridView.custom(
        padding: EdgeInsets.only(bottom: 10),
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        gridDelegate: SliverQuiltedGridDelegate(
          crossAxisCount: 4,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          // repeatPattern: type,
          pattern: const [
            QuiltedGridTile(2, 2),
            QuiltedGridTile(1, 1),
            QuiltedGridTile(1, 1),
            QuiltedGridTile(1, 2),
          ],
        ),
        childrenDelegate: SliverChildBuilderDelegate(
            containerInfo.childDelegate!.builder as Widget Function(
                BuildContext, int),
            childCount: containerInfo.childDelegate!.childCount),
      );
    }
    if (containerInfo.sectionIndex == 3) {
      return AlignedGridView.count(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          itemBuilder: containerInfo.childDelegate!.builder as Widget Function(
              BuildContext, int),
          itemCount: containerInfo.childDelegate!.childCount);
    }
    return MasonryGridView.count(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        padding: EdgeInsets.all(10),
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 4,
        itemBuilder: containerInfo.childDelegate!.builder as Widget Function(
            BuildContext, int),
        itemCount: containerInfo.childDelegate!.childCount);
  }

  Widget Tile({int index = 0}) {
    return Container(
      color: Colors.blue,
      // height: extent,
      child: Center(
        child: CircleAvatar(
          minRadius: 20,
          maxRadius: 20,
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
          child: Text('$index', style: const TextStyle(fontSize: 20)),
        ),
      ),
    );
  }
}
